<!-- 创建分组 -->
<template>
  <a-modal
    title="相册分组"
    :visible="visible"
    @ok="handleOk"
    @cancel="visible = false"
    :maskClosable="false"
    destroyOnClose
  >
    <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-model-item label="分组名称" prop="name">
        <a-input v-model="form.name" :maxLength="8" />
      </a-form-model-item>
      <a-form-model-item label="分组排序" prop="sort">
        <a-input v-model="form.sort" />
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import { editPhotoAlbumGroup } from '@/api/content/operate'
export default {
  components: {},
  data() {
    return {
      visible: false,
      type: 'add',
      title: '创建分组',
      labelCol: { span: 6 },
      wrapperCol: { span: 16 },
      form: {
        id: undefined,
        name: undefined,
        sort: undefined,
      },
      rules: {
        name: [{ required: true, message: '请输入分组名称', trigger: 'blur' }],
        sort: [{ required: true, message: '请输入分组排序', trigger: 'blur' }],
      },
    }
  },
  computed: {
    ...mapGetters(['groupList']),
  },
  watch: {},
  methods: {
    ...mapActions(['AddPhotoAlbumGroup', 'GetGroupList']),
    show(obj) {
      let { type, title, data } = obj
      this.type = type
      this.title = title
      Object.keys(this.form).forEach((k) => {
        this.form[k] = data[k]
      })
      this.visible = true
    },
    handleOk() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          let res = {}
          if (this.type === 'add') {
            res = await this.AddPhotoAlbumGroup({ ...this.form })
          } else {
            res = await editPhotoAlbumGroup({ ...this.form })
          }
          let { code, msg } = res
          this.$message[code === 0 ? 'success' : 'error'](msg)
          if (code === 0) {
            // this.GetGroupList(this.groupList.length > 0)
            this.GetGroupList(true)
            this.visible = false
          }
        }
      })
    },
  },
  created() {},
  mounted() {},
}
</script>
<style scoped></style>
